<template>
  <div class="w-full h-full flex flex-col">
    <n-card>
      <n-grid x-gap="12" :cols="4">
        <n-gi>
          <div class="w-full h-10 flex juzhong1">
            <div class="w-100px text-right flex-shrink-0">
              栏目名称：
            </div>
            <n-input placeholder="栏目名称" v-model:value="formValue.name"/>
          </div>
        </n-gi>
        <n-gi>
        </n-gi>
        <n-gi>
        </n-gi>
        <n-gi>
          <div class="w-full h-10 flex items-center">
            <n-button-group>
              <n-button @click="handleSearch">
                <n-icon>
                  <Search32Filled></Search32Filled>
                </n-icon>
                查询
              </n-button>
              <n-button @click="handleReset">
                <n-icon>
                  <ArrowReset32Filled></ArrowReset32Filled>
                </n-icon>
                重置
              </n-button>
              <n-button @click="handleCreate">
                <n-icon>
                  <Add16Filled></Add16Filled>
                </n-icon>
                新建
              </n-button>
            </n-button-group>
          </div>
        </n-gi>
      </n-grid>
    </n-card>
    <div class="w-full flex-1">
      <n-card class="w-full h-full">
        <flextable :column.sync="columns" :tabledata="tabledata"></flextable>
      </n-card>
    </div>
    <n-card class="w-full juzhong1">
      <fenye @change="getDataList" ref="fenyeref" :total="total"></fenye>
    </n-card>
    <Edit ref="Editref" />
  </div>
</template>

<script setup name="Noticemanager">
import Edit from "./model.vue"
import {Add16Filled, ArrowReset32Filled, Search32Filled} from "@vicons/fluent"
import {useRoute, useRouter} from "vue-router";
import {NButton} from "naive-ui";
import http from "@/request/request"
const router = useRouter()
const route = useRoute()
const Editref = ref(null)
const fenyeref=ref(null)
const formValue = ref({})
const rules = ref({})
const size = ref("medium")
const tabledata = ref([
  {"id":"1"},
])
const total = ref(0)
const columns = ref([
  {
    title: "序号", key: "index",width:60, show: true,align:"center", render: (rowData, rowIndex) => {
      return rowIndex + 1
    }
  },
  {title: "标题", key: "title", show: true},
  {title: "创建者", key: "user", show: true},
  {title: "状态", key: "status", show: true},
  {title: "创建时间", key: "createdTime", show: true,render: (rowData, rowIndex)=>{
      return rowData["createdTime"] ? new Date(rowData["createdTime"]).toLocaleString("zh", {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric',
        hour12: false,
        hour: 'numeric',
        minute: 'numeric',
        second: 'numeric'
      }):""
    }},
  {title: "更新时间", key: "changeTime", show: true,render: (rowData, rowIndex)=>{
      return rowData["changeTime"] ? new Date(rowData["changeTime"]).toLocaleString("zh", {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric',
        hour12: false,
        hour: 'numeric',
        minute: 'numeric',
        second: 'numeric'
      }):""
    }},
  {
    title: "查看", key: "view", width: 80,align:"center", show: true, render: (rowData, rowIndex) => {
      return h(NButton, {onClick: ()=>{handleView(rowData)},size:"small"}, {
        default() {
          return "查看"
        }
      })
    }
  },
  {
    title: "编辑", key: "view", width: 80, show: true,align:"center", render: (rowData, rowIndex) => {
      return h(NButton, {onClick: ()=>{handleEdit(rowData)},size:"small"}, {
        default() {
          return "编辑"
        }
      })
    }
  },
  {
    title: "删除", key: "view", width: 80, show: true,align:"center", render: (rowData, rowIndex) => {
      return h(NButton, {onClick: ()=>{handleDelete(rowData)},size:"small"}, {
        default() {
          return "删除"
        }
      })
    }
  },
])

// 向后台获取数据
const getDataList = (pageobj) => {
  const config = {
    ...pageobj,
  }
  Object.keys(formValue.value).forEach(item=>{
    if(formValue.value[item]!==null && formValue.value[item]!==undefined && formValue.value[item]!==""){
      config[item] = formValue.value[item]
    }
  })
  http.lanmulist(config).then(res=>{
    if(res.data && res.data.code===0){
      total.value = res.data.total
      tabledata.value = res.data.items
    }
  })
}
// 点击查询
const handleSearch = () => {
  fenyeref.value.changeoption({page:1})
}
// 点击重置
const handleReset = () => {
  Object.keys(formValue.value).forEach(item => {
    formValue.value[item] = null
  })
  handleSearch()
}
// 点击新建
const handleCreate = () => {
  Editref.value.init("add")
}
// 回到上一页的刷新方法
const refreshdelete=()=>{
  const page = fenyeref.value.page
  if(page >1 && tableData.value.length ===1){
    fenyeref.value.changeoption({page:page-1})
  }
  fenyeref.value.changeoption({})
}

// 点击删除
let deletemodel = inject("deletemodel")
const handleDelete=(item)=>{
  deletemodel(refreshdelete,http.lanmudelete,item.id,item.name)
}
// 点击编辑
const handleEdit=(item)=>{
  Editref.value.init("edit",{...item})
}
// 点击查看
const handleView=(item)=>{
  Editref.value.init("view",{...item})
}

// 创建修改弹窗回调
const shauxin=(type)=>{
  if(type==="add"){
    // 如果是创建，回到第一页
    handleSearch()
  }else{
    // 剩下的其他情况，刷新当前页
    fenyeref.value.changeoption({})
  }
}
</script>

<style scoped>

</style>
